<script setup lang="ts">
  import spritpng from '../assets/true.jpg'
  const init = () => {
    const stage = new createjs.Stage('bouncecanvas')
    var data = {
      images: [spritpng],
      frames: { width: 82, height: 82, margin: 0 }, // 每一帧得图片大小
      animations: {
        run: [0, 24], //前两个参数是雪碧图得索引从0开始，后一个参数是帧速率
        jump: [2, 3, 'run']
      }
    }
    var spriteSheet = new createjs.SpriteSheet(data)
    var animation = new createjs.Sprite(spriteSheet, 'run')
    animation.x = 100
    animation.y = 100
    stage.addChild(animation)
    stage.update()
    createjs.Ticker.setFPS(3) // 设置得帧率也就是跑多快
    createjs.Ticker.addEventListener('tick', stage)
  }

  onMounted(() => {
    nextTick(() => {
      init()
    })
  })
</script>

<template>
  <div>
    <div>dasd</div>
    <canvas
      id="bouncecanvas"
      width="400px"
      height="400px"
      style="background-color: antiquewhite"
    ></canvas>
  </div>
</template>

<style scoped lang="scss"></style>
